<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/carousel.css" />
<style>

</style>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand hidden-sm">二手图书交易网</a>
		</div>
		<div class="navbar-collapse collapse" role="navigation" aria-expanded="false" style="height: 1px;">
			<ul class="nav navbar-nav">
				<li><a>首页</a></li>
				<li><a href="order/orderList.html">我的订单</a></li>
				<li><a href="goods/editGoods.html">我要卖书</a></li>
				<li><a id="reCharge">充值</a></li>
			</ul>
			<ul id="Not_logged_in" class="nav navbar-nav navbar-right hidden-sm" style="display: block">
				<li><a id="index_modal">登录</a></li>
				<li><a href="sign.html">注册</a></li>
			</ul>
			<ul id="logged_in" class="nav navbar-nav navbar-right hidden-sm" style="display: none">
				<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown">当前用户<i id="name"></i> <b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="/mailbox/mailbox.html">邮<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>件</a></li>
						<li><a href="/user/userIndex.html">个人中心</a></li>
					</ul>
				</li>
				<li><a id="logout" onclick="logout()">退出登录</a></li>
			</ul>
		</div>
	</div>
</div>

<div class="carousel-div">
	<div class="carousel">
		<ul id="chooseul">
			<span class="iconfont prev">&lt;</span>
			<span class="iconfont next">&gt;</span>
		</ul>
		<div class="lines">
			<div class="active-line line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
		</div>
	</div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	<legend>全部书籍</legend>
</fieldset>

<div class="my-container">
	<ul class="pc-search-items-list" id = "goods"></ul>
</div>

<div class="modal fade" id="indexModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">用户登录</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">

					<div class="form-group">
						<label class="col-sm-3 control-label">用户名：</label>
						<div class="col-sm-8">
							<input type="text" name="username" class="form-control" id="username" placeholder="请输入用户名">
							<span class="help-block"></span>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-3 control-label">密码：</label>
						<div class="col-sm-8">
							<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码">
							<span class="help-block"></span>
						</div>
					</div>

				</form>
			</div>
			<div class="modal-footer">
				<a id="retrieve_modal" style="float: left">忘记密码</a>
				<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">关闭</button>
				<button type="button" class="btn btn-primary" onclick="login()">登录</button>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="retrieveModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">忘记密码</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-3 control-label">用户名：</label>
						<div class="col-sm-8">
							<input type="text" name="username" class="form-control" id="username2" placeholder="请输入用户名">
							<span class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">手机号：</label>
						<div class="col-sm-8">
							<input type="text" name="phone" class="form-control" id="phone" placeholder="请输入手机号">
							<span class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">新密码：</label>
						<div class="col-sm-8">
							<input type="text" name="newpwd" class="form-control" id="newpwd" placeholder="请输入新密码">
							<span class="help-block"></span>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">关闭</button>
				<button type="button"  class="btn btn-primary" onclick="retrieve()">确定</button>
			</div>
		</div>
	</div>
</div>
<div id='reChargeModal' class='modal fade' data-backdrop='static' role='dialog' aria-hidden=true>
	<div class='modal-dialog'>
		<div class='modal-content'>
			<div class='modal-header'>
				<button type='button' class='close' data-dismiss='modal' aria-hidden='true' @click='CloseRe'>&times;</button>
				<h4>充值</h4>
				</div>
			<div class='modal-body'>
				<div>
					<h4>请选择充值额度</h4>
					<div class='form-group'>
						<select class='form-control' id="amount" onclick="custom()">
							<option value="10">10</option>
							<option value="30">30</option>
							<option value="50">50</option>
							<option value="100">100</option>
							<option value="">自定义</option>
						</select>
					</div>
					<input type='hidden' class='form-control' id="custom" style="padding: 5px">
					<h6 style="padding: 5px">近期充值将会在24小时内到达您的账户，请耐心等待，感谢您的支持</h6>
					<div class='modal-footer' style="padding: 5px">
						<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>
						<button type='button' class='btn btn-primary' data-dismiss='modal' onclick='recharge()'>确定</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/carousel.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
	$(document).ready(function(){
		if(sessionStorage.Authorization!=null){	//进入页面时判断是否已登录，如果登录，获取相关信息
			$.ajax({
				url:"/user/getUser",
				type:"post",
				headers:{
					Authorization:sessionStorage.Authorization
				},
				success:function(result){
					if(result.code==200){
						var user = result.data;
						sessionStorage.setItem("uid",user.id);
						sessionStorage.setItem("uname",user.name);
						$("#name").html(user.name);
						$("#Not_logged_in").css("display", "none");
						$("#logged_in").css("display", "block");
					}else if(result.code==401){
						sessionStorage.removeItem("Authorization");
						layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.reload()});
					}else{
						layer.msg(result.msg,{icon: 2,time:2000});
					}
				}
			})
		}
		$.ajax({	//获取商品集合
			url:"/goods/getEasyGoodsList",
			type:"post",
			success:function(result){
				if(result.code==200){
					$.each(result.data,function(index,good){
						$("#goods").append(
							"<li class='pc-items-item item-undefined'>"+
							"<a href='/goods/goodsDesc.html?id="+good.id+"' class='hyperlinks'>"+
							"<img class='pc-items-item-img' data-rewrite='{width:\"468\",height: \"468\"}' data-lazy-collect='1' src='"+good.image+"'>"+
							"<div class='pc-items-item-title'>"+
								"<strong>"+good.name+"</strong>"+
								"<span class='title-text'>"+good.introduce+"</span>"+
							"</div>"+
							"<div class='price-con'>"+
							"<span class='coupon-price-title'>¥</span>"+
							"<span class='coupon-price-afterCoupon'>"+good.amount+"</span>&nbsp;"+
							"</div>"+
							"<div class='seller-info'>"+
							"<div class='seller-name'>"+
							"<span class='glyphicon glyphicon-user'></span>&nbsp;"+
							"<span class='goods-belong-user'>发布人:"+good.uname+"</span>"+
							"</div>"+
							"</div>"+
							"</a>"+
							"</li>"
						);
					});
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		});
		$.ajax({	//获取轮播图
			url:"/goods/getCarousel",
			type:"post",
			success:function(result){
				if(result.code==200){
					let books = result.data
					$("#chooseul").append(
						"<li class='now li-item'><a href='goods/goodsDesc.html?id="+books[0].id+"'><img src='"+books[0].image+"'></a></li>"+
						"<li class='after li-item'><a href='goods/goodsDesc.html?id="+books[1].id+"'><img src='"+books[1].image+"'></a></li>"+
						"<li class='li-item'><a href='goods/goodsDesc.html?id="+books[2].id+"'><img src='"+books[2].image+"'></a></li>"+
						"<li class='li-item'><a href='goods/goodsDesc.html?id="+books[3].id+"'><img src='"+books[3].image+"'></a></li>"+
						"<li class='li-item'><a href='goods/goodsDesc.html?id="+books[4].id+"'><img src='"+books[4].image+"'></a></li>"+
						"<li class='before li-item'><a href='goods/goodsDesc.html?id="+books[5].id+"'><img src='"+books[5].image+"'></a></li>"
					);
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		});
	});
	function login() {	//登录
		$.ajax({
			url:"/login",
			type:"post",
			data:{
				"name":$("#username").val(),
				"password":$("#password").val(),
			},
			success:function(result){
				if(result.code==200){
					layer.msg("登录成功!",{icon: 1,time:2000,},function(){window.location.reload()});
					sessionStorage.setItem("Authorization",result.data);
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		})
	}
	function logout() {	//退出登录
		$.ajax({
			url:"/logout",
			type:"post",
			success:function(result){
				if(result.code==200){
					sessionStorage.removeItem("Authorization");
					window.location.reload();
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		})
	}
	function retrieve() {	//忘记密码
		$.ajax({
			url:"/user/changePwd",
			type:"post",
			data:{
				"name":$("#username2").val(),
				"phone":$("#phone").val(),
				"newPwd":$("#newpwd").val(),
			},
			success:function(result){
				if (result.code == 200) {
					layer.msg("更改成功!",{icon: 1,time:2000});
					$("#retrieveModal").modal("hide");
					$("#indexModal").modal("show");
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		})
	}
	function custom() {	//自定义充值金额
		if($("#amount").val() == ""){
			$("#custom").attr("type","text")
		}else{
			$("#custom").attr("type","hidden")
		}
	}
	function recharge() {	//充值
		let amount = $("#amount").val();
		if(amount == ""){
			amount = $("#custom").val();
			if(amount==""){
				layer.msg("充值金额不能为空!",{icon: 2,time:2000});
				return;
			}
		}
		$.ajax({
			url:"/user/reCharge",
			type:"post",
			data:{
				"amount":amount
			},
			headers:{
				Authorization:sessionStorage.Authorization
			},
			success:function(result){
				if (result.code == 200) {
					layer.msg("充值成功！",{icon: 1,time:2000});
				}else if(result.code==401){
					sessionStorage.removeItem("Authorization");
					layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.reload()});
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		})
	}

	$("#index_modal").click(function (){
		//弹出模态框
		$("#indexModal").modal("show");
	});
	$("#retrieve_modal").click(function (){
		$('#indexModal').modal('hide');
		$("#retrieveModal").modal("show");
	})
	$("#reCharge").click(function (){
		//弹出模态框
		$("#reChargeModal").modal("show");
	});
</script>
</html>
